JavaScript 图像处理

图像处理

获取图像宽高

参考资料 js获取图片实际大小的宽高

// 图片地址
var img_url = "13643608813441.jpg"

// 创建对象
var img = new Image()

// 改变图片的src
img.src = img_url

// 判断是否有缓存
if(img.complete){
    // 打印
    alert('from:complete : width:'+img.width+',height:'+img.height)
}else{
    // 加载完成执行
    img.onload = function(){
        // 打印
        alert('width:'+img.width+',height:'+img.height)
    }
}

合成图片

let bgsrc = './FG_Face_p01_c1_m001.png'
let src = './5_s_A.png'
/**
 * 当我们创建一个 Image 对象时，
 * 就相当于给浏览器缓存了一张图片，
 * Image 对象也常用来做预加载图片（也就是将图片预先加载到浏览器中，当浏览图片的时候就能享受到极快的加载速度）。
 * 在HTML页面中，<img> 标签每出现一次，也就创建了一个 Image 对象。
 */
let bgImg = new Image();
bgImg.src = bgsrc;    // 背景图的url
bgImg.crossOrigin = 'Anonymous';
// onload 事件在图片加载完成后立即执行
bgImg.onload = () => {
  let canvas = document.createElement('canvas');
  // 获取宽高 
  canvas.width = bgImg.width;
  canvas.height = bgImg.height;
  console.log(bgImg.width + '--' + bgImg.height);
  // 建立一个 CanvasRenderingContext2D 二维渲染上下文。
  let context = canvas.getContext('2d');
  // 创建一个矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。
  context.rect(0, 0, canvas.width, canvas.height);
  // 先把背景图片画到画布上
  context.drawImage(bgImg, 0, 0);

  let img = new Image();
  img.src = src;    // 需要合进去的图片url
  img.crossOrigin = 'Anonymous';
  img.onload = () => {
    // 再把叠加上去图片画到画布上
    context.drawImage(img, 0, 0);
    let base64 = canvas.toDataURL('image/png');
    this.newimg = base64
  }